<!--响应成功的页面，计时结束后将会跳转-->
<template>
    <div class="success-view">
      <div class="success-content">
        <i-circle :percent="100" stroke-color="#5cb85c" >
          <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
        </i-circle>
        <H1>{{routerParams.title}}</H1>
      </div>
      <div class="success-description">
        <p> 您已成功{{routerParams.something}}，{{routerParams.moreMsg}}此页面将会在{{ second }}秒后进入<a @click="handJump">{{routerParams.menuName}}</a>界面</p>
      </div>
    </div>
</template>

<script>
export default {
  name: "success-view",
  props:{
  },
  data(){
    return{
      second: 5,
      timer: null,
      routerParams: {
        title: "",
        menuName: "",
        menuPath: "",
        something: "",
        moreMsg:""
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  mounted () {
    this.timer = setInterval(() => {
      if (this.second === 0) this.handJump()
      else this.second--
    }, 1000)
  },
  created() {
    console.log(this.$route)
    this.routerParams = Object.assign(this.$route.params)
  },
  methods:{
    backHome () {
      this.$router.replace({
        name: this.$config.homeName
      })
    },
    backPrev () {
      this.$router.go(-1)
    },
    //手动触发跳转
    handJump(){
      this.$router.replace({
        name: this.routerParams.menuPath
      })
    }
  }

}
</script>

<style lang="less" scoped>
.success-view{
  width: 100%;
  text-align: center;
  position: absolute;
  .success-content{
    margin: 0 auto;
    padding: 200px 100px;
  }
  .success-description{
    width: 40%;
    font-size: 18px;
    letter-spacing:2px;
    margin: 0 auto;
  }
}
</style>
